<template>
  <view class="min-h-screen bg-[#f0f0f0] pb-[32rpx]">
    <!-- 顶部图片区域 -->
    <image class="w-full h-[450rpx] object-cover" src="@/assets/imgs/shan.png" mode="aspectFill"></image>

    <!-- <image class="w-full h-[500rpx] object-cover absolute left-0 top-[320rpx] z-20" src="@/assets/imgs/shui.png" mode="aspectFill"></image> -->

    <!-- 内容卡片 -->
    <view class="w-[660rpx] mx-auto p-[32rpx] bg-white mt-[-120rpx] relative z-10 mb-[80rpx]">
      <view v-for="(item, index) in list" :key="index" class="mb-10 border-b-1 pd-2 border-[#eee]" @tap="jump(item)">
        <view class="text-[36rpx] font-bold mb-[20rpx]">・每日心得 {{ item.createtime?.split(' ')[0] || '' }}</view>
        <view class="text-[28rpx] text-[#333] leading-[1.6]">{{ item.title }}</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import Taro from "@tarojs/taro";
import { ref, onMounted } from "vue";
import http from "@/utils/http";

const list = ref([
  {
    desc: "相传有一位菩萨在悬崖上挖了八个坑，每个坑里都有清澈甘甜的水。这八坑分别代表着八种功德，包括布施、持戒、忍辱、精进、禅定、智慧、方坑分别代表着八种功德",
  },
  {
    desc: "相传有一位菩萨在悬崖上挖了八个坑，每个坑里都有清澈甘甜的水。这八坑分别代表着八种功德，包括布施、持戒、忍辱、精进、禅定、智慧、方坑分别代表着八种功德",
  },
  {
    desc: "相传有一位菩萨在悬崖上挖了八个坑，每个坑里都有清澈甘甜的水。这八坑分别代表着八种功德，包括布施、持戒、忍辱、精进、禅定、智慧、方坑分别代表着八种功德",
  },
  {
    desc: "相传有一位菩萨在悬崖上挖了八个坑，每个坑里都有清澈甘甜的水。这八坑分别代表着八种功德，包括布施、持戒、忍辱、精进、禅定、智慧、方坑分别代表着八种功德",
  },
]);

const jump = (item) => {
  Taro.navigateTo({
    url: `/other/home/day-detail?id=${item.id}`,
  });
};

onMounted(() => {
  console.log("onMounted");
  getGoods();
});

function getGoods() {
  http
    .post("/index.php/index/api/index", {
      Func: "getArticleList",
    })
    .then((res) => {
      list.value = [];
      if (res?.error == 0) {
        list.value = res.data;
      }
      console.log("list", list.value);
    });
}
</script>
